<!DOCTYPE html>
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	
<!-- Mirrored from template.walkingpixels.com/chromatron/ui-buttons.html by HTTrack Website Copier/3.x [XR&CO'2010], Thu, 27 Dec 2012 09:30:04 GMT -->
<head>
		<meta charset="utf-8">
		<title>UI &amp; Buttons | Chromatron HTML5 Admin Backend</title>
		<meta name="description" content="">
		<meta name="author" content="Walking Pixels | www.walkingpixels.com">
		<meta name="robots" content="index, follow">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<!-- jQuery Snippet Styles -->
		<link rel='stylesheet' type='text/css' href='css/plugins/jquery.snippet.css'>
		
		<!-- jQuery jGrowl Styles -->
		<link rel='stylesheet' type='text/css' href='css/plugins/jquery.jgrowl.css'>
		
		<!-- Styles -->
		<link rel='stylesheet' type='text/css' href='css/chromatron-blue.css'>
		
		<!-- Fav and touch icons -->
		<link rel="shortcut icon" href="img/icons/favicon.html">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/apple-touch-icon-114-precomposed.html">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/apple-touch-icon-72-precomposed.html">
		<link rel="apple-touch-icon-precomposed" href="img/icons/apple-touch-icon-57-precomposed.html">
		
		<!-- JS Libs -->
		<script src="../../ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="js/libs/jquery.js"><\/script>')</script>
		<script src="js/libs/modernizr.js"></script>
		<script src="js/libs/selectivizr.js"></script>
		
		<script>
			$(document).ready(function(){
				
				// Tooltips for nav badge
				$('.main-navigation .badge').tooltip({
					placement: 'bottom'
				});
				
				// Tooltips for widgets
				$('.widget [title]').tooltip({
					placement: 'left'
				});
				
				// Close button for widgets
				$('.widget').alert();
				
				// Remove tooltip when widget is closed
				$('.widget').bind('close', function () {
					$(this).find('.close').tooltip('destroy');
				})
				
				// Dropdowns
				$('.dropdown-toggle').dropdown();
				
				// Tabs
				$('.demoTabs a').click(function (e) {
					e.preventDefault();
					$(this).tab('show');
				})
				
				// Radio buttons
				$('.demoBtns').button();
				
				// Popovers
				$('.demoPopover').popover({
					trigger: 'hover'
				});
				
			});
		</script>
		
		<script type="text/javascript">
			//var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-22557155-2"]);_gaq.push(["_trackPageview"]);(function(){var b=document.createElement("script");b.type="text/javascript";b.async=true;b.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(b,a)})();
		</script>
	</head>
	<body>
		
		<!-- Main page container -->
		<div class="container-fluid">
		
			<!-- Left (navigation) side -->
			<section class="navigation-block">
			
				<!-- Main page header -->
				<header>
				
					<!-- Main page logo -->
					<h1><a class="brand" href="login.html" title="Back to Homepage">Chromatron Responsive Admin Backend built with Twitter Bootstrap</a></h1>
					
					<!-- Main page headline -->
					<p>A cathode ray tube awesomeness</p>
					
				</header>
				<!-- /Main page header -->
				
				<!-- User profile -->
				<section class="user-profile">
					<figure>
						<img alt="John Pixel avatar" src="http://placekitten.com/50/50">
						<figcaption>
							<strong><a href="#" class="">John Pixel</a></strong>
							<em>Administrator</em>
							<ul>
								<li><a class="btn btn-primary btn-flat" href="#" title="View www.example.com">view website</a></li>
								<li><a class="btn btn-primary btn-flat" href="#" title="Securely logout from application">logout</a></li>
							</ul>
						</figcaption>
					</figure>
				</section>
				<!-- /User profile -->
				
				<!-- Responsive navigation -->
				<a href="#" class="btn btn-navbar btn-large" data-toggle="collapse" data-target=".nav-collapse"><span class="fam-rosette"></span> UI & Buttons</a>
				
				<!-- Main navigation -->
				<nav class="main-navigation nav-collapse" role="navigation">
					<ul>
						<li><a href="index.html" class="no-submenu"><span class="fam-house"></span>Dashboard</a></li>
						<li><a href="forms.html" class="no-submenu"><span class="fam-application-form"></span>Forms</a></li>
						<li><a href="charts.html" class="no-submenu"><span class="fam-chart-line"></span>Charts</a></li>
						<li><a href="tables.html" class="no-submenu"><span class="fam-application-view-columns"></span>Tables</a></li>
						<li>
							<a href="#"><span class="fam-picture"></span>Gallery<span class="badge" title="5 new image uploaded">5</span></a>
							<ul>
								<li><a href="gallery.html">Car Gallery</a></li>
								<li><a href="gallery.html">Food Gallery</a></li>
								<li><a href="gallery.html">Art Gallery</a></li>
								<li><a href="gallery.html">Animal Gallery</a></li>
								<li><a href="gallery.html">Super long name to see how it collapse</a></li>
							</ul>
						</li>
						<li><a href="file-explorer.html" class="no-submenu"><span class="fam-briefcase"></span>File explorer</a></li>
						<li><a href="calendar.html" class="no-submenu"><span class="fam-calendar-view-day"></span>Calendar<span class="badge" title="27 tasks this week">27</span></a></li>
						<li class="current"><a href="ui-buttons.html" class="no-submenu"><span class="fam-rosette"></span>UI & Buttons</a></li>
						<li><a href="typo.html" class="no-submenu"><span class="fam-text-padding-left"></span>Typography</a></li>
						<li><a href="grid.html" class="no-submenu"><span class="fam-cog"></span>Grid</a></li>
						<li>
							<a href="#"><span class="fam-heart"></span>Goodies</a>
							<ul>
								<li><a href="goodies.html">Goodies</a></li>
								<li><a href="401.html">Error 401</a></li>
								<li><a href="403.html">Error 403</a></li>
								<li><a href="404.html">Error 404</a></li>
								<li><a href="500.html">Error 500</a></li>
								<li><a href="503.html">Error 503</a></li>
							</ul>
						</li>
					</ul>
				</nav>
				<!-- /Main navigation -->
				
				<!-- Side note -->
				<section class="side-note">
					<div class="thumbnail">
						<img src="http://placekitten.com/221/120" alt="Sample Image">	
					</div>
					<h2>Side note with image</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et dignissim metus. Maecenas id augue ac metus tempus aliquam. Sed pharetra placerat est suscipit sagittis. Phasellus aliquam malesuada blandit. Donec adipiscing sem erat.</p>
					<a class="btn pull-right" href="#" title="This is my title!">Event details</a>
				</section>
				<!-- /Side note -->
				
			</section>
			<!-- /Left (navigation) side -->
			
			<!-- Right (content) side -->
			<section class="content-block" role="main">
			
				<!-- Widget container -->
				<div class="widgets-container">
				
					<!-- Widget box -->
					<div class="widget alert fade in increase">
						<a href="#" class="close" data-dismiss="alert" title="Hide widget">&times;</a>
						<span>increase</span>
						<p><strong>+35,18<sup>%</sup></strong> +2489 new visitors</p>
					</div>
					<!-- /Widget box -->
					
					<!-- Widget box -->
					<div class="widget alert fade in decrease">
						<button class="close" data-dismiss="alert" type="button" title="Hide widget">&times;</button>
						<span>decrease</span>
						<p><strong>-12,50<sup>%</sup></strong> -311 new orders</p>
					</div>
					<!-- /Widget box -->
					
					<!-- Widget box -->
					<div class="widget alert fade in increase">
						<a href="#" class="close" data-dismiss="alert" title="Hide widget" >&times;</a>
						<span>7</span>
						<p><strong>Tasks</strong> +3 New Tasks</p>
					</div>
					<!-- /Widget box -->
					
					<!-- Widget Box -->
					<div class="widget alert fade in text-only">
						<button class="close" data-dismiss="alert" type="button" title="Hide widget">&times;</button>
						<p><strong>Text Only App</strong> +29 Lorem Ipsum</p>
					</div>
					<!-- /Widget box -->
					
					<!-- Add new widget box -->
					<div class="widget add-new-widget">
						<a href="#">
							<strong><span class="awe-plus-sign"></span> Add Widget</strong>
						</a>
					</div>
					<!-- /Add new widget box -->
					
				</div>
				<!-- /Widget container -->
				
				<!-- Breadcrumbs -->
				<ul class="breadcrumb">
					<li><a href="#"><span class="awe-home"></span> Home</a></li>
					<li><a href="#">Chromatron template</a></li>
					<li class="active">UI &amp; Buttons</li>
				</ul>
				<!-- Breadcrumbs -->
				
				<!-- Page header -->
				<article class="page-header">
					<h1><span class="awe-magic"></span> User interface &amp; buttons</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit, dolor mollis adipiscing elementum, ipsum turpis euismod tellus, vitae mollis velit leo id nisi. Morbi non lectus turpis, eu interdum orci. In at rutrum nisi. Donec sit amet urna purus, at eleifend ipsum. Sed magna enim, tempor eu tincidunt vitae, dictum tristique arcu.</p>
				</article>
				<!-- /Page header -->
				
				<!-- Grid row -->
				<div class="row-fluid">
				
					<!-- Example alerts -->
					<!-- Data block -->
					<article class="span8 data-block">
						<div class="data-container">
							<header>
								<h2>Alerts &amp; notifications</h2>
							</header>
							<section>
								<div class="alert fade in">
									<button class="close" data-dismiss="alert">&times;</button>
									<strong>Default alert box!</strong> This is default style. Nothing special to see.
								</div>
								<div class="alert alert-error fade in">
									<button class="close" data-dismiss="alert">&times;</button>
									<strong>Error alert box!</strong> Nice red alert when something goes wrong.
								</div>
								<div class="alert alert-info fade in">
									<button class="close" data-dismiss="alert">&times;</button>
									<strong>Info alert box!</strong> Also a blue one for tips and info highlights.
								</div>
								<div class="alert alert-success fade in">
									<button class="close" data-dismiss="alert">&times;</button>
									<strong>Success alert box!</strong> If you play nice, you will see this one.
								</div>
								<div class="alert alert-inverse fade in">
									<button class="close" data-dismiss="alert">&times;</button>
									<strong>Black alert box!</strong> Come to the dark side, we have cookies.
								</div>
								<div class="alert alert-white fade in">
									<button class="close" data-dismiss="alert">&times;</button>
									<strong>White alert box!</strong> Reversed dark side, may come handy too.
								</div>
								<div class="alert alert-block fade in">
									<button class="close" type="button" data-dismiss="alert">×</button>
									<h4 class="alert-heading">Warning!</h4>
									<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
								</div>
							</section>
							<footer>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et maecenas id augue ac metus tempus aliquam. Sed pharetra placerat suscipit sagittis.</p>
							</footer>
						</div>
					</article>
					<!-- /Data block -->
					
					<!-- Data block -->
					<article class="span4 data-block nested">
						<div class="data-container">
							<header>
								<h2><span class="awe-tint"></span> Fusce nisl dolor</h2>
								<ul class="data-header-actions">
									<li><a href="#" class="btn btn-alt btn-primary">Options</a></li>
								</ul>
							</header>
							<section>
								<ul class="thumbnails">
									<li>
										<ul class="thumbnail-actions">
											<li><a href="#" title="Edit photo">Edit</a></li>
											<li><a href="#" title="Delete photo">Delete</a></li>
										</ul>
										<div class="thumbnail"><img src="http://placekitten.com/350/250" alt="Sample Image"></div>
									</li>
								</ul>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo velit, eleifend nec adipiscing id, consequat ut augue. Pellentesque nec neque et leo ullamcorper pellentesque. Pellentesque aliquet iaculis velit sit amet vestibulum.</p>
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
				</div>
				<!-- /Grid row -->
				
				<!-- Grid row -->
				<div class="row-fluid">
				
					<!-- Data block -->
					<article class="span12 data-block nested">
						<div class="data-container">
							<header>
								<h2>Buttons</h2>
								<ul class="data-header-actions tabs">
									<li class="demoTabs active"><a href="#default">Default</a></li>
									<li class="demoTabs"><a href="#chromatron">Chromatron</a></li>
									<li class="demoTabs"><a href="#flat">Flat</a></li>
								</ul>
							</header>
							<section class="tab-content">
							
								<!-- Tab #default -->
								<div class="tab-pane active" id="default">
								
									<h3>Default buttons</h3>
									<table class="table table-striped">
										<thead>
											<tr>
												<th>Button</th>
												<th>Class</th>
												<th>Description</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><button class="btn">Default</button></td>
												<td><code>btn</code></td>
												<td>Standard gray button with gradient</td>
											</tr>
											<tr>
												<td><button class="btn btn-primary">Primary</button></td>
												<td><code>btn btn-primary</code></td>
												<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
											</tr>
											<tr>
												<td><button class="btn btn-info">Info</button></td>
												<td><code>btn btn-info</code></td>
												<td>Used as an alternative to the default styles</td>
											</tr>
											<tr>
												<td><button class="btn btn-success">Success</button></td>
												<td><code>btn btn-success</code></td>
												<td>Indicates a successful or positive action</td>
											</tr>
											<tr>
												<td><button class="btn btn-warning">Warning</button></td>
												<td><code>btn btn-warning</code></td>
												<td>Indicates caution should be taken with this action</td>
											</tr>
											<tr>
												<td><button class="btn btn-danger">Danger</button></td>
												<td><code>btn btn-danger</code></td>
												<td>Indicates a dangerous or potentially negative action</td>
											</tr>
											<tr>
												<td><button class="btn btn-inverse">Inverse</button></td>
												<td><code>btn btn-inverse</code></td>
												<td>Alternate dark gray button, not tied to a semantic action or use</td>
											</tr>
										</tbody>
									</table>
									
									<!-- Grid row -->
									<div class="row-fluid">
									
										<!-- Different tags button styling -->
										<div class="span4">
											<h3>One class for multiple tags</h3>
											<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
											<a class="btn" href="#">Link</a>
											<button class="btn" type="submit">Button</button>
											<input class="btn" type="button" value="Input">
											<input class="btn" type="submit" value="Submit">
										</div>
										
										<!-- Different button size -->
										<div class="span4">
											<h3>3 different sizes</h3>
											<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>, for two additional sizes.</p>
											<p>
												<button class="btn btn-large">Action</button> <button class="btn btn-small">Action</button> <button class="btn btn-mini">Action</button>
											</p>
										</div>
										
										<!-- Disabled state styling -->
										<div class="span4">
											<h3>Disabled state</h3>
											<p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code>, attribute for <code>&lt;button&gt;</code> elements.</p>
											<p>
												<a class="btn disabled" href="#">Disabled link</a>
												<button class="btn disabled" disabled="disabled">Disabled button</button>
											</p>
										</div>
										
									</div>
									<!-- /Grid row -->
									
									<!-- Grid row -->
									<div class="row-fluid">
									
										<!-- Example button groups -->
										<div class="span3">
											<h3>Button groups</h3>
											<p>
												<div class="btn-group">
													<button class="btn">Left</button>
													<button class="btn">Middle</button>
													<button class="btn">Right</button>
												</div>
											</p>
										</div>
										
										<!-- Example button toolbars -->
										<div class="span3">
											<h3>Button toolbars</h3>
											<p>
												<div class="btn-toolbar">
													<div class="btn-group">
														<button class="btn">1</button>
														<button class="btn">2</button>
														<button class="btn">3</button>
													</div>
													<div class="btn-group">
														<button class="btn">4</button>
														<button class="btn">5</button>
														<button class="btn">6</button>
													</div>
												</div>
											</p>
										</div>
										
										<!-- Example checkbox and radio toolbars -->
										<div class="span3">
											<h3>Checkbox and radio toolbars</h3>
											<p>
												<div class="btn-group" data-toggle="buttons-checkbox">
													<button class="btn">Left</button>
													<button class="btn active">Middle</button>
													<button class="btn active">Right</button>
												</div>
											</p>
											<p>
												<div class="btn-group" data-toggle="buttons-radio">
													<button class="btn btn-inverse">Left</button>
													<button class="btn btn-inverse">Middle</button>
													<button class="btn btn-inverse active">Right</button>
												</div>
											</p>
										</div>
										
										<!-- Example button dropdowns -->
										<div class="span3">
											<h3>Button dropdowns</h3>
											<p>
												<div class="btn-group">
													<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
													<ul class="dropdown-menu">
														<li><a href="#">Action</a></li>
														<li><a href="#">Another action</a></li>
														<li><a href="#">Something else here</a></li>
														<li class="divider"></li>
														<li><a href="#">Separated link</a></li>
													</ul>
												</div>
											</p>
											<p>
												<div class="btn-group dropup">
													<button class="btn">Right dropup</button>
													<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu pull-right">
														<li><a href="#">Action</a></li>
														<li><a href="#">Another action</a></li>
														<li><a href="#">Something else here</a></li>
														<li class="divider"></li>
														<li><a href="#">Separated link</a></li>
													</ul>
												</div>
											</p>
										</div>
										
									</div>
									<!-- /Grid row -->
									
								</div>
								<!-- Tab #default -->
								
								<!-- Tab #chromatron -->
								<div class="tab-pane" id="chromatron">
								
									<h3>Chromatron buttons</h3>
									<table class="table table-striped">
										<thead>
											<tr>
												<th>Button</th>
												<th>Class</th>
												<th>Description</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><button class="btn btn-alt">Default</button></td>
												<td><code>btn btn-alt</code></td>
												<td>Standard gray button with gradient</td>
											</tr>
											<tr>
												<td><button class="btn btn-alt btn-primary ">Primary</button></td>
												<td><code>btn btn-alt btn-primary</code></td>
												<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
											</tr>
											<tr>
												<td><button class="btn btn-alt btn-info">Info</button></td>
												<td><code>btn btn-alt btn-info</code></td>
												<td>Used as an alternative to the default styles</td>
											</tr>
											<tr>
												<td><button class="btn btn-alt btn-success">Success</button></td>
												<td><code>btn btn-alt btn-success</code></td>
												<td>Indicates a successful or positive action</td>
											</tr>
											<tr>
												<td><button class="btn btn-alt btn-warning">Warning</button></td>
												<td><code>btn btn-alt btn-warning</code></td>
												<td>Indicates caution should be taken with this action</td>
											</tr>
											<tr>
												<td><button class="btn btn-alt btn-danger">Danger</button></td>
												<td><code>btn btn-alt btn-danger</code></td>
												<td>Indicates a dangerous or potentially negative action</td>
											</tr>
											<tr>
												<td><button class="btn btn-alt btn-inverse">Inverse</button></td>
												<td><code>btn btn-alt btn-inverse</code></td>
												<td>Alternate dark gray button, not tied to a semantic action or use</td>
											</tr>
										</tbody>
									</table>
									
									<!-- Grid row -->
									<div class="row-fluid">
									
										<!-- Different tags button styling -->
										<div class="span4">
											<h3>One class for multiple tags</h3>
											<p>Use the <code>.btn .btn-alt</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
											<a class="btn btn-alt" href="#">Link</a>
											<button class="btn btn-alt" type="submit">Button</button>
											<input class="btn btn-alt" type="button" value="Input">
											<input class="btn btn-alt" type="submit" value="Submit">
										</div>
										
										<!-- Different button size -->
										<div class="span4">
											<h3>3 different sizes</h3>
											<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>, for two additional sizes.</p>
											<p>
												<button class="btn btn-alt btn-large">Action</button> <button class="btn btn-alt btn-small">Action</button> <button class="btn btn-alt btn-mini">Action</button>
											</p>
										</div>
										
										<!-- Disabled state styling -->
										<div class="span4">
											<h3>Disabled state</h3>
											<p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code>, attribute for <code>&lt;button&gt;</code> elements.</p>
											<p>
												<a class="btn btn-alt disabled" href="#">Disabled link</a>
												<button class="btn btn-alt disabled" disabled="disabled">Disabled button</button>
											</p>
										</div>
										
									</div>
									<!-- /Grid row -->
									
									<!-- Grid row -->
									<div class="row-fluid">
									
										<!-- Example button groups -->
										<div class="span3">
											<h3>Button groups</h3>
											<p>
												<div class="btn-group">
													<button class="btn btn-alt">Left</button>
													<button class="btn btn-alt">Middle</button>
													<button class="btn btn-alt">Right</button>
												</div>
											</p>
										</div>
										
										<!-- Example button toolbars -->
										<div class="span3">
											<h3>Button toolbars</h3>
											<p>
												<div class="btn-toolbar">
													<div class="btn-group">
														<button class="btn btn-alt">1</button>
														<button class="btn btn-alt">2</button>
														<button class="btn btn-alt">3</button>
													</div>
													<div class="btn-group">
														<button class="btn btn-alt">4</button>
														<button class="btn btn-alt">5</button>
														<button class="btn btn-alt">6</button>
													</div>
												</div>
											</p>
										</div>
										
										<!-- Example checkbox and radio toolbars -->
										<div class="span3">
											<h3>Checkbox and radio toolbars</h3>
											<p>
												<div class="btn-group" data-toggle="buttons-checkbox">
													<button class="btn btn-alt">Left</button>
													<button class="btn btn-alt active">Middle</button>
													<button class="btn btn-alt active">Right</button>
												</div>
											</p>
											<p>
												<div class="btn-group" data-toggle="buttons-radio">
													<button class="btn btn-alt btn-inverse">Left</button>
													<button class="btn btn-alt btn-inverse">Middle</button>
													<button class="btn btn-alt btn-inverse active">Right</button>
												</div>
											</p>
										</div>
										
										<!-- Example button dropdowns -->
										<div class="span3">
											<h3>Button dropdowns</h3>
											<p>
												<div class="btn-group">
													<button class="btn btn-alt dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
													<ul class="dropdown-menu">
														<li><a href="#">Action</a></li>
														<li><a href="#">Another action</a></li>
														<li><a href="#">Something else here</a></li>
														<li class="divider"></li>
														<li><a href="#">Separated link</a></li>
													</ul>
												</div>
											</p>
											<p>
												<div class="btn-group dropup">
													<button class="btn btn-alt">Right dropup</button>
													<button class="btn btn-alt dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu pull-right">
														<li><a href="#">Action</a></li>
														<li><a href="#">Another action</a></li>
														<li><a href="#">Something else here</a></li>
														<li class="divider"></li>
														<li><a href="#">Separated link</a></li>
													</ul>
												</div>
											</p>
										</div>
										
									</div>
									<!-- /Grid row -->
									
								</div>
								<!-- Tab #chromatron -->
								
								<!-- Tab #flat -->
								<div class="tab-pane" id="flat">
								
									<h3>Flat buttons</h3>
									<table class="table table-striped">
										<thead>
											<tr>
												<th>Button</th>
												<th>Class</th>
												<th>Description</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><button class="btn btn-flat">Default</button></td>
												<td><code>btn btn-flat</code></td>
												<td>Standard gray button with gradient</td>
											</tr>
											<tr>
												<td><button class="btn btn-flat btn-primary ">Primary</button></td>
												<td><code>btn btn-flat btn-primary</code></td>
												<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
											</tr>
											<tr>
												<td><button class="btn btn-flat btn-info">Info</button></td>
												<td><code>btn btn-flat btn-info</code></td>
												<td>Used as an alternative to the default styles</td>
											</tr>
											<tr>
												<td><button class="btn btn-flat btn-success">Success</button></td>
												<td><code>btn btn-flat btn-success</code></td>
												<td>Indicates a successful or positive action</td>
											</tr>
											<tr>
												<td><button class="btn btn-flat btn-warning">Warning</button></td>
												<td><code>btn btn-flat btn-warning</code></td>
												<td>Indicates caution should be taken with this action</td>
											</tr>
											<tr>
												<td><button class="btn btn-flat btn-danger">Danger</button></td>
												<td><code>btn btn-flat btn-danger</code></td>
												<td>Indicates a dangerous or potentially negative action</td>
											</tr>
											<tr>
												<td><button class="btn btn-flat btn-inverse">Inverse</button></td>
												<td><code>btn btn-flat btn-inverse</code></td>
												<td>Alternate dark gray button, not tied to a semantic action or use</td>
											</tr>
										</tbody>
									</table>
									
									<!-- Grid row -->
									<div class="row-fluid">
									
										<!-- Different tags button styling -->
										<div class="span4">
											<h3>One class for multiple tags</h3>
											<p>Use the <code>.btn .btn-flat</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
											<a class="btn btn-flat" href="#">Link</a>
											<button class="btn btn-flat" type="submit">Button</button>
											<input class="btn btn-flat" type="button" value="Input">
											<input class="btn btn-flat" type="submit" value="Submit">
										</div>
										
										<!-- Different button size -->
										<div class="span4">
											<h3>3 different sizes</h3>
											<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>, for two additional sizes.</p>
											<p>
												<button class="btn btn-flat btn-large">Action</button> <button class="btn btn-flat btn-small">Action</button> <button class="btn btn-flat btn-mini">Action</button>
											</p>
										</div>
										
										<!-- Disabled state styling -->
										<div class="span4">
											<h3>Disabled state</h3>
											<p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code>, attribute for <code>&lt;button&gt;</code> elements.</p>
											<p>
												<a class="btn btn-flat disabled" href="#">Disabled link</a>
												<button class="btn btn-flat disabled" disabled="disabled">Disabled button</button>
											</p>
										</div>
										
									</div>
									<!-- /Grid row -->
									
									<!-- Grid row -->
									<div class="row-fluid">
									
										<!-- Example button groups -->
										<div class="span3">
											<h3>Button groups</h3>
											<p>
												<div class="btn-group">
													<button class="btn btn-flat">Left</button>
													<button class="btn btn-flat">Middle</button>
													<button class="btn btn-flat">Right</button>
												</div>
											</p>
										</div>
										
										<!-- Example button toolbars -->
										<div class="span3">
											<h3>Button toolbars</h3>
											<p>
												<div class="btn-toolbar">
													<div class="btn-group">
														<button class="btn btn-flat">1</button>
														<button class="btn btn-flat">2</button>
														<button class="btn btn-flat">3</button>
													</div>
													<div class="btn-group">
														<button class="btn btn-flat">4</button>
														<button class="btn btn-flat">5</button>
														<button class="btn btn-flat">6</button>
													</div>
												</div>
											</p>
										</div>
										
										<!-- Example checkbox and radio toolbars -->
										<div class="span3">
											<h3>Checkbox and radio toolbars</h3>
											<p>
												<div class="btn-group" data-toggle="buttons-checkbox">
													<button class="btn btn-flat">Left</button>
													<button class="btn btn-flat active">Middle</button>
													<button class="btn btn-flat active">Right</button>
												</div>
											</p>
											<p>
												<div class="btn-group" data-toggle="buttons-radio">
													<button class="btn btn-flat btn-inverse">Left</button>
													<button class="btn btn-flat btn-inverse">Middle</button>
													<button class="btn btn-flat btn-inverse active">Right</button>
												</div>
											</p>
										</div>
										
										<!-- Example button dropdowns -->
										<div class="span3">
											<h3>Button dropdowns</h3>
											<p>
												<div class="btn-group">
													<button class="btn btn-flat dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
													<ul class="dropdown-menu">
														<li><a href="#">Action</a></li>
														<li><a href="#">Another action</a></li>
														<li><a href="#">Something else here</a></li>
														<li class="divider"></li>
														<li><a href="#">Separated link</a></li>
													</ul>
												</div>
											</p>
											<p>
												<div class="btn-group dropup">
													<button class="btn btn-flat">Right dropup</button>
													<button class="btn btn-flat dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
													<ul class="dropdown-menu pull-right">
														<li><a href="#">Action</a></li>
														<li><a href="#">Another action</a></li>
														<li><a href="#">Something else here</a></li>
														<li class="divider"></li>
														<li><a href="#">Separated link</a></li>
													</ul>
												</div>
											</p>
										</div>
										
									</div>
									<!-- /Grid row -->
									
								</div>
								<!-- Tab #flat -->
									
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
				</div>
				<!-- /Grid row -->
				
				<!-- Grid row -->
				<div class="row-fluid">
				
					<!-- Example progress bars -->
					<!-- Data block -->
					<article class="span6 data-block">
						<div class="data-container">
							<header>
								<h2>Progress bars</h2>
							</header>
							<section>
								<div class="progress progress-info">
									<div class="bar" style="width: 20%">20%</div>
								</div>
								<div class="progress progress-success">
									<div class="bar" style="width: 40%">40%</div>
								</div>
								<div class="progress progress-warning">
									<div class="bar" style="width: 60%">60%</div>
								</div>
								<div class="progress progress-danger progress-striped">
									<div class="bar" style="width: 80%">80%</div>
								</div>
								<div class="progress progress-inverse progress-striped active">
									<div class="bar" style="width: 89%">89%</div>
								</div>
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
					<!-- Example jQuery Snippet -->
					<!-- Data block -->
					<article class="span6 data-block nested">
						<div class="data-container">
							<header>
								<h2>jQuery Snippet</h2>
							</header>
							<section>
<pre class="html">
&lt;pre&gt;
	// comment
	function checkMeaningOfLife ( decimal, success ) {
		if ( parseInt(decimal,10) === 42 ) {
			window.console.log(success);
		}
	};
&lt;/pre&gt;
</pre>
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
				</div>
				<!-- /Grid row -->
				
				<!-- Grid row -->
				<div class="row-fluid">
				
					<!-- Example loading icons -->
					<!-- Data block -->
					<article class="span4 data-block">
						<div class="data-container">
							<header>
								<h2>Loading icons</h2>
							</header>
							<section>
								<p>Chromatron comes with several predefined loading icons. If you want different image, color or size visit <a href="http://preloaders.net/" target="_blank">preloaders.net</a> and generate your own.</p>
								<p><span class="loading red" title="Loading, please wait&hellip;">Loading&hellip;</span> <span class="loading dark" title="Loading, please wait&hellip;">Loading&hellip;</span> <span class="loading green" title="Loading, please wait&hellip;">Loading&hellip;</span> <span class="loading blue" title="Loading, please wait&hellip;">Loading&hellip;</span></p>
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
					<!-- Example popovers and modals -->
					<!-- Data block -->
					<article class="span4 data-block nested">
						<div class="data-container">
							<header>
								<h2>Popover and modal window</h2>
							</header>
							<section>
								<h3>Popovers</h3>
								<p>Hover over the button to trigger the popover.</p>
								<a href="#" class="btn btn-danger demoPopover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Hover for popover</a>
								
								<h3>Modal</h3>
								<p>Not much to say here - basic modals. Click on the button to trigger modal window.</p>
								<a class="btn" data-toggle="modal" href="#demoModal" >Launch Modal</a>
								<div class="modal fade hide" id="demoModal">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">×</button>
										<h3>Modal header</h3>
									</div>
									<div class="modal-body">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae enim ac ligula eleifend commodo id quis risus. Donec consequat lorem et metus facilisis vitae dapibus felis fermentum. Aenean imperdiet nibh vitae sem condimentum pharetra. Mauris molestie molestie faucibus. Aenean sit amet sem orci, at adipiscing dolor. Fusce feugiat odio vitae erat commodo sed accumsan ante sollicitudin. Integer mollis, tellus vel feugiat varius, risus quam lacinia erat, eu ultricies urna dolor ac metus. Mauris vestibulum euismod lectus, vitae vehicula nisl ullamcorper sit amet. In ac consectetur purus. Integer orci ipsum, sollicitudin non rutrum id, adipiscing eu augue. Nulla eget lorem elit. Curabitur vehicula porttitor suscipit.</p>
									</div>
									<div class="modal-footer">
										<a href="#" class="btn" data-dismiss="modal">Close</a>
										<a href="#" class="btn btn-primary">Save changes</a>
									</div>
								</div>
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
					<!-- Example pagination -->
					<!-- Data block -->
					<article class="span4 data-block">
						<div class="data-container">
							<header>
								<h2>Pagination</h2>
							</header>
							<section>
								<div class="pagination pagination-right">
									<ul>
										<li><a href="#">&laquo;</a></li>
										<li class="active"><a href="#">10</a></li>
										<li class="disabled"><a href="#">...</a></li>
										<li><a href="#">20</a></li>
										<li><a href="#">&raquo;</a></li>
									</ul>
								</div>
								<div class="pagination pagination-centered">
									<ul>
										<li class="active"><a href="#">1</a></li>
										<li><a href="#">2</a></li>
										<li><a href="#">3</a></li>
										<li><a href="#">4</a></li>
										<li><a href="#">5</a></li>
									</ul>
								</div>
								<div class="pagination">
									<ul>
										<li class="disabled"><a href="#"><span class="icon-arrow-left"></span></a></li>
										<li class="active"><a href="#">1</a></li>
										<li><a href="#">2</a></li>
										<li><a href="#">3</a></li>
										<li><a href="#">4</a></li>
										<li><a href="#"><span class="icon-arrow-right"></span></a></li>
									</ul>
								</div>
								<ul class="pager">
									<li><a href="#">&larr; Older</a></li>
									<li><a href="#">Newer &rarr;</a></li>
								</ul>
									<ul class="pager">
									<li class="previous disabled"><a href="#">&larr; Older</a></li>
									<li class="next"><a href="#">Newer &rarr;</a></li>
								</ul>
							</section>
						</div>
					</article>
					<!-- /Data block -->
					
				</div>
				<!-- /Grid row -->
			
			</section>
			<!-- /Right (content) side -->
			
		</div>
		<!-- /Main page container -->
		
		<!-- Scripts -->
		<script src="js/navigation.js"></script>
		
		<!-- Bootstrap scripts -->
		<!--
		<script src="js/bootstrap/bootstrap-tooltip.js"></script>
		<script src="js/bootstrap/bootstrap-dropdown.js"></script>
		<script src="js/bootstrap/bootstrap-tab.js"></script>
		<script src="js/bootstrap/bootstrap-button.js"></script>
		<script src="js/bootstrap/bootstrap-alert.js"></script>
		<script src="js/bootstrap/bootstrap-popover.js"></script>
		<script src="js/bootstrap/bootstrap-collapse.js"></script>
		<script src="js/bootstrap/bootstrap-modal.js"></script>
		<script src="js/bootstrap/bootstrap-transition.js"></script>
		-->
		<script src="js/bootstrap/bootstrap.min.js"></script>
		
		<!-- jQuery Snippet -->
		<script src="js/plugins/snippet/jquery.snippet.min.js"></script>
		
		<script>
			$(document).ready(function() {
			
				$('pre.html').snippet('html');
			
			});
		</script>
		
		<!-- jQuery jGrowl -->
		<script type="text/javascript" src="js/plugins/jGrowl/jquery.jgrowl.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function(){
				
				$.jGrowl("Chromatron uses jQuery jGrowl plugin for notifications.", {
					header: 'Default theme',
					sticky: true
				});
				
				$.jGrowl("Notifications are available in 8 styles.", {
					header: 'Chromatron (chromatron) theme',
					sticky: true,
					theme: 'chromatron'
				});
				
				$.jGrowl("Default gray style, Chromatron style...", {
					header: 'Primary (primary) theme',
					sticky: true,
					theme: 'primary'
				});
				
				$.jGrowl("...and style for each of 5 colors available.", {
					header: 'Red (danger) theme',
					sticky: true,
					theme: 'danger'
				});
				
				$.jGrowl("jGrowl is very popular and flexible plugin.", {
					header: 'Blue (info) theme',
					sticky: true,
					theme: 'info'
				});
				
				$.jGrowl('Check out jGrowl homepage for more info <a href="http://stanlemon.net/pages/jgrowl" target="_blank">http://stanlemon.net/pages/jgrowl</a>.', {
					header: 'Green (success) theme',
					sticky: true,
					theme: 'success'
				});
				
				$.jGrowl("jGrowl is distributed under the MIT and GPL licenses - which means you can do whatever you want with it.", {
					header: 'Yellow (warning) theme',
					sticky: true,
					theme: 'warning'
				});
				
				$.jGrowl("If you like jGrowl plugin buy Stan Lemon a cup of coffee.", {
					header: 'Black (inverse) theme',
					sticky: true,
					theme: 'inverse'
				});
				
				// You can style closer with same class
				$.jGrowl.defaults.closerTemplate = '<div class="inverse">hide all notifications</div>';
				
			});
			
		</script>
		
	</body>

<!-- Mirrored from template.walkingpixels.com/chromatron/ui-buttons.html by HTTrack Website Copier/3.x [XR&CO'2010], Thu, 27 Dec 2012 09:30:09 GMT -->
</html>
